<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
	<title>重设密码申请</title>
	<!-- Meta tag Keywords -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8" />
	<meta name="keywords" content=""/>
<!--	<script>-->
<!--		addEventListener("load", function () {-->
<!--			setTimeout(hideURLbar, 0);-->
<!--		}, false);-->

<!--		function hideURLbar() {-->
<!--			window.scrollTo(0, 1);-->
<!--		}-->
<!--	</script>-->
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="shortcut icon" type="image/x-icon" href="css/img/favicon.png">
	<link rel="stylesheet" href="css/fonts/font-awesome/css/font-awesome.min.css">
	<!-- Place favicon.ico in the root directory -->

	<!-- CSS here -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/animate.min.css">
	<link rel="stylesheet" href="css/magnific-popup.css">
	<link rel="stylesheet" href="css/fontawesome-all.min.css">
	<link rel="stylesheet" href="css/owl.carousel.min.css">
	<link rel="stylesheet" href="css/jquery-ui.min.css">
	<link rel="stylesheet" href="css/flaticon.css">
	<link rel="stylesheet" href="css/odometer.css">
	<link rel="stylesheet" href="css/aos.css">
	<link rel="stylesheet" href="css/slick.css">
	<link rel="stylesheet" href="css/default.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/responsive.css">

	<!-- Meta tag Keywords -->
	<!-- css files -->
	<link rel="stylesheet" href="css/loginstyle.css" type="text/css" media="all" />
	<!-- Style-CSS -->
	<link rel="stylesheet" href="css/fontawesome-all.css">
	<link rel="stylesheet" href="css/css/error.css">
	<!-- Font-Awesome-Icons-CSS -->
	<!-- //css files -->
	<!-- web-fonts -->
	<link href="http://maxcdn.bootstrapcdn.com/css?family=Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i" rel="stylesheet">
	<link href="http://maxcdn.bootstrapcdn.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
	<!-- //web-fonts -->

	<style>
		/*#weixin_hover {*/
		/*	position: relative;*/
		/*}*/
		/*#weixin_img{*/
		/*	z-index: 9999;*/
		/*	display: none;*/
		/*	position:absolute;*/
		/*	left: 50%;*/
		/*	margin-left: -100px;*/
		/*	margin-top: -2px;*/
		/*	width: 100px;*/
		/*	height: 1000%;*/
		/*}*/
		/*#weixin_hover:hover #weixin_img{*/
		/*	display: block;*/
		/*}*/
		.error {
			color: indianred;
			font-size: 18px;
		}
	</style>
</head>

<body>


<!-- preloader  -->
<div id="preloader">
	<div id="ctn-preloader" class="ctn-preloader">
		<div class="animation-preloader">
			<div class="spinner"></div>
			<div class="txt-loading">
                        <span data-text-preloader="E" class="letters-loading">
                            E
                        </span>
				<span data-text-preloader="D" class="letters-loading">
                            D
                        </span>
				<span data-text-preloader="S" class="letters-loading">
                            S
                        </span>
				<span data-text-preloader="T" class="letters-loading">
                            T
                        </span>
				<span data-text-preloader="U" class="letters-loading">
                            U
                        </span>
				<span data-text-preloader="D" class="letters-loading">
                            D
                        </span>
				<span data-text-preloader="Y" class="letters-loading">
                            Y
                        </span>
			</div>
		</div>
		<div class="loader">
			<div class="row">
				<div class="col-3 loader-section section-left">
					<div class="bg"></div>
				</div>
				<div class="col-3 loader-section section-left">
					<div class="bg"></div>
				</div>
				<div class="col-3 loader-section section-right">
					<div class="bg"></div>
				</div>
				<div class="col-3 loader-section section-right">
					<div class="bg"></div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- preloader end -->


<!-- Scroll-top -->
<button class="scroll-top scroll-to-target" data-target="html">
	<i class="fas fa-angle-up"></i>
</button>
<!-- Scroll-top-end-->


<!-- 头部 -->
<header>
	<div class="header-top-wrap d-none d-md-block">
		<div class="container-fluid container-full">
			<div class="row align-items-center">
				<div class="col-lg-6 col-md-6">
					<div class="d-flex align-items-center">
						<div class="header-top-library">
							<a href="#">图书馆<i class="fas fa-angle-down"></i></a>
						</div>
						<div class="header-top-search">
							<form action="#">
								<input type="text" placeholder="搜索...">
								<button><i class="fas fa-search"></i></button>
							</form>
						</div>
					</div>
				</div>
				<div class="col-lg-6 col-md-6">
					<div class="header-right-list">
						<div class="header-top-social">
							<ul>
								<li>联系我们</li>
								<li><a href="#"><i class="fab fa-twitter"></i></a></li>
								<li>
									<a href="#"><i class="fab fa-weibo"></i> </a></li>
								<li><a href="tencent://message/?uin=1092535160&Menu=yes& Service=300&sigT=42a1e5347953b64c5ff3980f8a6e644d4b31456cb0b6ac6b27663a3c4dd0f4aa14a543b1716f9d45"><i class="fab fa-qq"></i></a></li>
								<li id="weixin_hover" ><a href="#"><i class="fab fa-weixin"></i>
									<ul>
										<img class="qrcode" id="weixin_img"  src="css/img/product/wx_01.png" alt="wx:K15035689083"/>
									</ul>
								</a></li>
							</ul>
						</div>
						<div class="header-user-login">
							<a href="index.html"><i class="fas fa-home"></i>首页</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- bg effect -->
	<div id="bg">
		<canvas></canvas>
		<canvas></canvas>
		<canvas></canvas>
	</div>
	<!-- //bg effect -->
	<!-- title -->
	<h1>重设密码申请</h1>
	<!-- //title -->
	<!-- content
	<form th:action="@{/forgotPwd}" th:method="post">
		邮箱：<input type="text" name="userNameOrEmail" />
		<input type="submit" value="提交" /><a href=""></a>
	</form>
	-->
	<div class="sub-main-w3">
		<form th:action="@{/forgotPwd}" th:method="post" id="LAY-user-form">
			<!-- <h2>现在登录
				<i class="fas fa-level-down-alt"></i>
			</h2> -->
			<div class="form-style-agile">
				<label style="color: #fff;">
					<i class="fas fa-user"></i>
					邮箱
				</label>
				<div>
					<label for="LAY-user-login-vercode"></label>
					<input placeholder="邮箱" name="userNameOrEmail" class="info" type="text"><span style="color: red" th:text="${errorMsg}"></span>
				</div>

			</div>
<!--			<div class="form-style-agile">-->
<!--				<label>-->
<!--					<i class="fas fa-unlock-alt"></i>-->
<!--					密码-->
<!--				</label>-->
<!--				<input placeholder="密码" name="password" class="info" type="password" required="" id="pwd">-->
<!--				&lt;!&ndash;如果msg的值为空则不显示消息&ndash;&gt;-->
<!--				<p id="ss" style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>-->
<!--				<span style="color: red" ></span>-->
<!--			</div>-->
<!--			 checkbox-->
			<div class="form-style-agile">
				<div class="row">
					<label class="col-md-12" style="color: #fff;">
						<i class="fas fa-user"></i>
						验证码
					</label>
				<div class="col-md-9">
					<label class="layadmin-user-login-icon layui-icon layui-icon-vercode"
						   for="LAY-user-login-vercode" ></label>
					<input type="text" name="vercode" id="LAY-user-login-vercode"
						   lay-verify="required"
						   placeholder="图形验证码" class="layui-input">
				</div>
				<div class="col-md-3">
					<div style="padding-top: 30px">
						<img src= "captcha"
							 class="layadmin-user-login-codeimg"
							 id="LAY-user-get-vercode">
					</div>
				</div>
				</div>
			</div>

			<h3 th:text="${sendMailMsg}" style="color: white"></h3>
			<div class="wthree-text">
				<ul>
					<li>
						<label class="anim">
							<input type="hidden" class="checkbox" required="" >
<!--							<span>保持登录</span>-->

						</label>
					</li>
					<li style="width: 200px">
<!--						<a th:href="@{/forgotPwdUI}">忘记密码?</a>-->
						<input type="submit" value="提交" /><a href=""/>
						<a href="login.html"><input type="button" value="返回" style="    color: #fff;
    background: #f7296f;
    border: none;
    padding: 13px 0;
    margin-top: 30px;
    outline: none;
    width: 36%;
    font-size: 16px;
    cursor: pointer;
    letter-spacing: 2px;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    transition: 0.5s all;
    box-shadow:2px 2px 6px rgba(0, 0, 0, 0.49); "/></a>
					</li>
				</ul>
			</div>
<!--			 //checkbox-->

<!--			<input type="submit" value="登录" id="b1">-->
		</form>
	</div>
	<!-- //content -->

	<!-- copyright -->
	<div class="footer">
		<p>Copyright © 2020.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">多元合创</a></p>
	</div>
	<script src="css/js/jquery3.4.1.js"></script>
	<script src="css/js/jquery.validate.js"></script>
	<script src="css/layui/layui.js"></script>
	<!-- //copyright -->
	<script>
		//点击切换验证码
		var $vercodeImg = $("#LAY-user-get-vercode")
		$vercodeImg.click(function () {
			$vercodeImg.attr("src", "captcha?token=" + Math.random())
			$("#LAY-user-login-vercode").val("")
		})
		//表单验证
		$("#LAY-user-form").validate({
			rules: {
				userNameOrEmail: {
					required: true
				},
				vercode: {
					required: true,
					remote: {
						url: "verifyCaptcha",     //后台处理程序
						type: "post",               //数据发送方式
						dataType: "json",           //接受数据格式
						data: {                     //要传递的数据
							vercode: function () {
								return $("#LAY-user-login-vercode").val();
							}
						}
					}
				}
			},
			messages: {
				userNameOrEmail: {
					required: "请输入您的邮箱"
				},
				vercode: {
					required: "请输入验证码",
					remote: "验证码输入有误"
				}

			}
		})
	</script>
	<!-- Jquery -->
	<script src="css/js/jquery-3.3.1.min.js"></script>
	<!-- //Jquery -->

	<!-- effect js -->
	<script src="css/js/canva_moving_effect.js"></script>
	<!-- //effect js -->
	<script src="css/js/vendor/jquery-3.5.0.min.js"></script>
	<script src="css/js/popper.min.js"></script>
	<script src="css/js/bootstrap.min.js"></script>
	<script src="css/js/isotope.pkgd.min.js"></script>
	<script src="css/js/imagesloaded.pkgd.min.js"></script>
	<script src="css/js/jquery.magnific-popup.min.js"></script>
	<script src="css/js/owl.carousel.min.js"></script>
	<script src="css/js/jquery.odometer.min.js"></script>
	<script src="css/js/jquery-ui.min.js"></script>
	<script src="css/js/jquery.appear.js"></script>
	<script src="css/js/slick.min.js"></script>
	<script src="css/js/ajax-form.js"></script>
	<script src="css/js/wow.min.js"></script>
	<script src="css/js/aos.js"></script>
	<script src="css/js/plugins.js"></script>
	<script src="css/js/main.js"></script>
</header>
</body>
</html>